<template>
    <view>
        <view class="title" v-if="control == 0">
            <text class="cancel" @click="cancel()">取消</text>
            <text class="center" @click="change(1)"><text>签到</text><text class="cuIcon-triangledownfill"></text></text>
            <button type="primary" class="button" size="mini" @click="send">签到</button>
        </view>

        <view class="" v-if="control == 1">
            <view class="title">
                <text class="cancel">取消</text>
                <text class="center"><text>签到</text><text class="cuIcon-triangleupfill"></text></text>
                <button type="primary" class="button" size="mini">签到</button>
            </view>
            <view class="line" @click="change(0)">
                <image src="../../static/setgoal/check-to.png" mode="" style="padding-left: 30upx;width:80upx;height: 60upx;"></image>
                <text style="padding-left: 30upx;font-size: 35upx;">签到</text>
                <text class="cuIcon-check" style="color: #007AFF;margin-left: 400upx;font-size: 40upx;font-weight: 800;"></text>
            </view>
            <view class="block" @click="change(2)">
                <image src="../../static/setgoal/coffer.png" mode="" style="padding-left: 30upx;width:80upx;height: 60upx;"></image>
                <text style="padding-left: 30upx;font-size: 35upx;">休假</text>
            </view>
        </view>

        <view class="title" v-if="control == 2">
            <text class="cancel" @click="cancel()">取消</text>
            <text class="center" @click="change(3)"><text>休假</text><text class="cuIcon-triangledownfill"></text></text>
            <button type="warn" class="button" size="mini" @click="xiujias">休假</button>
        </view>

        <view class="" v-if="control == 3">
            <view class="title">
                <text class="cancel">取消</text>
                <text class="center"><text>休假</text><text class="cuIcon-triangleupfill"></text></text>
                <button type="warn" class="button" size="mini">休假</button>
            </view>

            <view class="line" @click="change(0)">
                <image src="../../static/setgoal/check-to.png" mode="" style="padding-left: 30upx;width:80upx;height: 60upx;"></image>
                <text style="padding-left: 30upx;font-size: 35upx;">签到</text>

            </view>
            <view class="block" @click="change(2)">
                <image src="../../static/setgoal/coffer.png" mode="" style="padding-left: 30upx;width:80upx;height: 60upx;"></image>
                <text style="padding-left: 30upx;font-size: 35upx;">休假</text>
                <text class="cuIcon-check" style="color: #007AFF;margin-left: 400upx;font-size: 40upx;font-weight: 800;"></text>
            </view>
        </view>

        <view class="" v-if="input == 0" style="margin-top: 20upx;">
            <textarea value="" placeholder="分享你的心得,故事和知识~~" v-model="qiandao" class="qiandao" ></textarea>

            <view class="feedback-body feedback-uploader">
                <view class="uni-uploader">
                    <view class="uni-uploader-head">
                        <view class="uni-uploader-title">点击预览图片</view>
                        <view class="uni-uploader-info">{{imageList.length}}/8</view>
                    </view>
                    <view class="uni-uploader-body">
                        <view class="uni-uploader__files">
                            <block v-for="(image,index) in imageList" :key="index">
                                <view class="uni-uploader__file" style="position: relative;">
                                    <image class="uni-uploader__img" :src="image" @tap="previewImage(0)"></image>
                                    <view class="close-view" @click="close(index)">x</view>
                                </view>
                            </block>
                            <view class="uni-uploader__input-box" v-show="imageList.length < 8">
                                <view class="uni-uploader__input" @tap="chooseImg(0)"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

        </view>

        <view class="" v-if="input == 1" style="margin-top: 20upx;">
            <textarea value="" placeholder="填写您的休假原因~~" v-model="xiujia" class="qiandao" />

            <view class="feedback-body feedback-uploader">
               <view class="uni-uploader">
                   <view class="uni-uploader-head">
                       <view class="uni-uploader-title">点击预览图片</view>
                       <view class="uni-uploader-info">{{imageLists.length}}/8</view>
                   </view>
                   <view class="uni-uploader-body">
                       <view class="uni-uploader__files">
                           <block v-for="(image,index) in imageLists" :key="index">
                               <view class="uni-uploader__file" style="position: relative;">
                                   <image class="uni-uploader__img" :src="image" @tap="previewImage(1)"></image>
                                   <view class="close-view" @click="closes(index)">x</view>
                               </view>
                           </block>
                           <view class="uni-uploader__input-box" v-show="imageLists.length < 8">
                           	<view class="uni-uploader__input" @tap="chooseImg(1)"></view>
                           </view>
                       </view>
                   </view>
               </view>
           </view>
    
       </view>
    </view>
</template>

<script>
  
    export default {
       
        data() {
            return {
                control:0,
                input:0,
                qiandao:"",
                xiujia:"",
                imageList: [],
                id:"",
                 imageLists: [],
            }
        },
        methods: {
            close(e){
                this.imageList.splice(e,1);
            },
            closes(e){
                this.imageLists.splice(e,1);
            },
           change(num){
               this.control = num;
               if(this.control == 0 || this.control == 1){
                   this.input = 0
               }
               else{
                   this.input = 1
               }
           },
            chooseImg(num) { //选择图片
            
            if(num == 0){
                
                uni.chooseImage({
                   sourceType: ["camera", "album"],
                   sizeType: "compressed",
                   count: 8 - this.imageList.length,
                   success: (res) => {
                       this.imageList = this.imageList.concat(res.tempFilePaths);
                   }
               })
                
                
            }
            
            if(num  == 1 ){
                 uni.chooseImage({
                    sourceType: ["camera", "album"],
                    sizeType: "compressed",
                    count: 8 - this.imageLists.length,
                    success: (res) => {
                        this.imageLists = this.imageLists.concat(res.tempFilePaths);
                    }
                })
                
            }
               
           },
             previewImage(num) { //预览图片
             
             if(num  == 0){
                 
                  uni.previewImage({
                   urls: this.imageList
               });  
             }
             
             if(num == 1){
                 uni.previewImage({
                    urls: this.imageLists
                });   
                 
             }
              
           },
           send(){
               let c = this;
               
               let {userId,token} = uni.getStorageSync("userInfos");
               
               if(this.imageList.length == 0){
                   
                   console.log(c.qiandao)
                   uni.request({
                       url:"https://07cr7.live/setgoals/SetBriefSummary2",
                   
                       data:{
                          "message":c.qiandao,
                          "myPlan_id":c.id,
                          statue:0 
                       },
                         header:{"content-type":"application/x-www-form-urlencoded",
                         "adminToken":token
                         },
                       method:"POST",
                       success(res) {
                           console.log(res.data);
    if(res.data.status == 500){
          uni.showToast({
            title: '数据发送失败',
            duration: 2000,
            icon:"none",
            position:"center"
            
        });
        return;
    }
                                 uni.setStorage({
                                     key:"hasqiandao",
                                     data:"1"
                                 })
                                 
                                 uni.navigateBack({
                              delta: 1
                         })  
                       }
                   })
                   
                    
               }
               else{
                   
                     var imgs = this.imageList.map((value, index) => {
                    return {
                        name: "image" + index,
                        uri: value
                    }
                })
    
                        
        console.log("发送")
                     
                       uni.uploadFile({
                          url:"https://07cr7.live/setgoals/SetBriefSummary2",
                          files:imgs,
                          formData:{
                              "message":c.qiandao,
                              "myPlan_id":c.id,
                              statue:0
                          },
                       header:{"content-type":"application/x-www-form-urlencoded",
                       "adminToken":token
                       },
                          success(uploadFileRes) {
                              
                              if(uploadFileRes.data.status == 500){
                                   uni.showToast({
                                     title: '数据发送失败',
                                     duration: 2000,
                                     icon:"none",
                                     position:"center"
                                     
                                 });
                                 return;
                             } 
                              
                              console.log(uploadFileRes);
                              console.log(uploadFileRes.data);
                              
                              uni.setStorage({
                                  key:"hasqiandao",
                                  data:"1"
                              })
                              
                              uni.navigateBack({
                           delta: 1
                      })
                              
                                   
                          }
                       })
                   
               }
               
         
        
                       
                   }  ,
    
           xiujias(){
               
               let c = this;
               
               let {userId,token} = uni.getStorageSync("userInfos");
             
             if(this.imageLists.length == 0){
                 
                 uni.request({
                      url:"https://07cr7.live/setgoals/SetBriefSummary2",
                     data:{
                        "message":c.qiandao,
                        "myPlan_id":c.id,
                        statue:1
                     },
                     header:{"content-type":"application/x-www-form-urlencoded",
                    "adminToken":token 
                     },
                     method:"POST",
                     success(res) {
                         console.log(res.data);
                      if(res.data.status == 500){
                           uni.showToast({
                             title: '数据发送失败',
                             duration: 2000,
                             icon:"none",
                             position:"center"
                             
                         });
                         return;
                     } 
                               uni.setStorage({
                                   key:"hasqiandao",
                                   data:"1"
                               })
                               
                               uni.navigateBack({
                            delta: 1
                       })  
                     }
                 })
                 return
             }
             else{
                 
                  var imgs = this.imageLists.map((value, index) => {
                 return {
                     name: "image" + index,
                     uri: value
                 }
             })
             
             
             
             
             if(c.xiujia == ""){
                 c.xiujia = "休假中"
             }
                   
             uni.uploadFile({
                 url:"https://07cr7.live/setgoals/SetBriefSummary2",
                files:imgs,
                formData:{
                    "message":c.xiujia,
                    "myPlan_id":c.id,
                    statue:1
                },
                 header:{"content-type":"application/x-www-form-urlencoded",
                 "adminToken":token 
                 },
                success(uploadFileRes) {
                    console.log(uploadFileRes.data)
             if(uploadFileRes.data.status == 500){
                  uni.showToast({
                    title: '数据发送失败',
                    duration: 2000,
                    icon:"none",
                    position:"center"
                    
                });
                return;
            }         
                    uni.setStorage({
                        key:"hasqiandao",
                        data:"1"
                    })
                    
                    uni.navigateBack({
                         delta: 1
                    })
                    
                        
                }
             })  
             }  
           },
           cancel(){
                uni.navigateBack({
                    delta: 1
               })
           }
        },
        onLoad() {
            let c =this;
            
        const  value  =  uni.getStorageSync("qiandaoids" );
        console.log(value)
            this.id  = value;
             uni.removeStorageSync('qiandaoids');
        }
    }
</script>

<style>
    page{
        background-color: #FEFEFE  ;
    }
.title{
    padding-top: 100upx;
    background-color: #FEFEFE;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 20upx;
    }
    .cancel{
        padding-left: 30upx;
        font-size: 35upx;
        width:300upx
    }
    .center{
        width:250upx ;
        padding-left: 10upx;
         font-size: 40upx;
    }
    .button{
        width: 130upx;
        height: 60upx;
       margin-right: 30upx;
       padding-bottom:10upx ;
        
    }
    .line{
        display: flex;
        flex-direction: row;
        width: 750upx;
        background-color: #FEFEFE;
        border-top: #D8D8D8 solid 1upx;
        height: 120upx;
        padding-top: 30upx;
    }
    .block{
        display: flex;
        flex-direction: row;
         height: 120upx;
          padding-top: 30upx;
           background-color: #FEFEFE;
            border-top: #D8D8D8 solid 1upx;  
    }
    .qiandao{
       padding-left: 30upx;
       padding-top: 30upx;
       font-size: 35upx;
       color: #333333;
     background-color: #faf6e6;
      width: 750upx;
      padding-right: 30upx;
       
    }
    
    .uni-uploader {
    	flex: 1;
    	flex-direction: column;
    }
    .uni-uploader-head {
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    }
    .uni-uploader-info {
    	color: #B2B2B2;
    }
    .uni-uploader-body {
    	margin-top: 16upx;
    }
    .uni-uploader__files {
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    }
    .uni-uploader__file {
    	margin: 10upx;
    	width: 210upx;
    	height: 210upx;
    }
    .uni-uploader__img {
    	display: block;
    	width: 210upx;
    	height: 210upx;
    }
    .uni-uploader__input-box {
    	position: relative;
    	margin:10upx;
    	width: 208upx;
    	height: 208upx;
    	border: 2upx solid #D9D9D9;
    }
    .uni-uploader__input-box:before,
    .uni-uploader__input-box:after {
    	content: " ";
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	-webkit-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    	background-color: #D9D9D9;
    }
    .uni-uploader__input-box:before {
    	width: 4upx;
    	height: 79upx;
    }
    .uni-uploader__input-box:after {
    	width: 79upx;
    	height: 4upx;
    }
    .uni-uploader__input-box:active {
    	border-color: #999999;
    }
    .uni-uploader__input-box:active:before,
    .uni-uploader__input-box:active:after {
    	background-color: #999999;
    }
    .uni-uploader__input {
    	position: absolute;
    	z-index: 1;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	opacity: 0;
    }
    .feedback-uploader {
    	padding: 22upx 20upx;
    }
    .feedback-body {
    	background: #fff;
    }
    .close-view{
        text-align: center;line-height:14px;height: 16px;width: 16px;border-radius: 50%;background: #FF5053;color: #FFFFFF;position: absolute;top: -6px;right: -4px;font-size: 12px;
    }
</style>
